<section>
  <h4>Pills tabs:</h4>
  <d-tabs [(activeTab)]="tabActiveId" type="pills">
    <d-tab *ngFor="let item of tabItems" [id]="item.id">
      <ng-template dTabTitle>
        {{ item.title }}
      </ng-template>
      <ng-template dTabContent>
        {{ item.content }}
      </ng-template>
    </d-tab>
  </d-tabs>

  <h4 style="margin-top: 20px">[vertical]="true":</h4>
  <d-tabs [(activeTab)]="tabActiveId" type="pills" [vertical]="true">
    <d-tab *ngFor="let item of tabItems" [id]="item.id">
      <ng-template dTabTitle>
        {{ item.title }}
      </ng-template>
      <ng-template dTabContent>
        {{ item.content }}
      </ng-template>
    </d-tab>
  </d-tabs>
</section>
<section>
  <h4 style="margin-top: 20px">Option tabs:</h4>

  <d-tabs [(activeTab)]="tabActiveId" type="options">
    <d-tab *ngFor="let item of tabItems" [id]="item.id">
      <ng-template dTabTitle>
        {{ item.title }}
      </ng-template>
      <ng-template dTabContent>
        {{ item.content }}
      </ng-template>
    </d-tab>
  </d-tabs>
  <h4 style="margin-top: 20px">Option tabs with fix width 100px:</h4>

  <d-tabs [(activeTab)]="tabActiveId" type="options" customWidth="100px">
    <d-tab *ngFor="let item of tabItems" [id]="item.id">
      <ng-template dTabTitle>
        {{ item.title }}
      </ng-template>
      <ng-template dTabContent>
        {{ item.content }}
      </ng-template>
    </d-tab>
  </d-tabs>
  <d-tabs [(activeTab)]="tabActiveId" type="slider" customWidth="100px">
    <d-tab *ngFor="let item of tabItems" [id]="item.id">
      <ng-template dTabTitle>
        {{ item.title }}
      </ng-template>
      <ng-template dTabContent>
        {{ item.content }}
      </ng-template>
    </d-tab>
  </d-tabs>
</section>
<section>
  <h4 style="margin-top: 20px">Wrapped tabs:</h4>
  <div class="content-container">
    <d-tabs [(activeTab)]="tabActiveId" type="wrapped" (activeTabChange)="activeTabChange($event)">
      <d-tab *ngFor="let item of tabItems" [id]="item.id" [title]="item.title"> </d-tab>
    </d-tabs>
    <div style="padding: 10px">当前激活的Tab:{{ activeTabData.title }}</div>
  </div>
</section>
